<template>
  <div class="avue-logo">
    <transition name="fade">
      <div v-if="keyCollapse" class="avue-logo_subtitle" key="0">
        <img src="/img/logo.png" />
      </div>
    </transition>
    <transition-group name="fade">
      <template v-if="!keyCollapse">
        <div class="avue-logo_title" key="1">
          <img src="/img/logo.png" />
          <span>{{ appConfig.shortTitle }}</span>
        </div>
      </template>
    </transition-group>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Logo",
  data() {
    return {};
  },
  created() {},
  computed: {
    ...mapGetters(["keyCollapse", "appConfig"]),
  },
  methods: {},
};
</script>

<style lang="scss">
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-active {
  transition: opacity 2.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
